import clsx from "clsx";
import { ArrowUpRight, CornerDownRight } from "lucide-react";
import { motion } from "motion/react";
import { FC, useState } from "react";
import { fullNavConfig } from "../../config/nav";
import CountUp from "./CountUp";
import Image from "next/image";
const FullNav: FC<{ isScrolled: boolean }> = ({ isScrolled }) => {
  const navContainerClass = clsx("w-screen h-screen fixed right-0 bg-white ", {
    "-mt-10": isScrolled,
  });
  const [openTab, setOpenTab] = useState<number>(0);
  return (
    <motion.div
      initial={{ y: -1000, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      exit={{ y: 0, opacity: 0 }}
      className={navContainerClass}
    >
      <div className="bg-gray-100 py-4 px-20 [&>a]:border-b [&>a]:cursor-pointer flex flex-row gap-6">
        <a>受験生の方</a>
        <a className="relative">
          在学生・保証人の方
          <span className="flex h-3 w-3 absolute -top-1 right-0">
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
            <span className="relative inline-flex rounded-full h-3 w-3 bg-orange-500"></span>
          </span>
        </a>
        <a>卒業生の方</a>
        <a>企業・一般の方</a>
        <a>報道機関の方</a>
      </div>
      <div className="w-[100%] h-[calc(100%-160px)]  text-gray-600 flex flex-row gap-10 p-15">
        <div className="flex h-full flex-row gap-10">
          <div className="border-r w-[320px] px-10">
            <div>
              <ul>
                {fullNavConfig.map((item, index) => {
                  return (
                    <li
                      key={index}
                      onClick={() => setOpenTab(index)}
                      className={`group text-xl font-bold mb-4 flex flex-row items-center justify-start gap-2 hover:text-orange-400 cursor-pointer transition-all ${
                        openTab === index ? "text-orange-400" : ""
                      }`}
                    >
                      <span
                        className={`group-hover:text-orange-400 p-2 rounded-full transition-all ${
                          openTab === index
                            ? "bg-orange-400 !text-white"
                            : " text-gray-600"
                        }`}
                      >
                        <CornerDownRight className="" />
                      </span>
                      {item.title}
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>
          <div className="overflow-y-auto h-full scroll pr-4 w-[calc(100%-320px)] [&>h1]:text-2xl [&>h1]:font-bold [&>p]:my-4 [&>p]:indent-8 font-[lexend] leading-7">
            {openTab === 0 ? (
              <>
                <div className="grid grid-cols-3 gap-x-4 gap-y-4 m-10">
                  <div className="text-center">
                    <CountUp
                      className="text-3xl font-[lexend] font-bold text-orange-400"
                      value={99}
                      Component="div"
                    />
                    <p>学部専攻</p>
                  </div>
                  <div className=" text-center">
                    <CountUp
                      className="text-3xl font-[lexend] font-bold text-orange-400"
                      value={12032}
                      Component="div"
                    />
                    <p>現在の学生</p>
                  </div>
                  <div className=" text-center">
                    <CountUp
                      className="text-3xl font-[lexend] font-bold text-orange-400"
                      value={1231}
                      Component="span"
                    />
                    <p>教職員</p>
                  </div>
                </div>
                <h1>学校の位置づけと教育理念</h1>
                <motion.p
                  initial={{ opacity: 0, y: -20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                >
                  [学院名]（略称：[学院名]、英文名称：[学院名]）は、教育部認可の総合高等教育機関（学部・修士課程・博士課程を提供）です。[省]
                  [市]（地域名：「科学教育の名城」「沿海都市」など）に位置し、歴史と近代的活力に満ちた都市です。[学院名]は「[学院名]」をモットーとし、「啓蒙・勤勉・求道・革新」をモットーに、「人間本位、品質本位、特色ある発展、社会への奉仕」を教育理念としています。強い愛国心、国際感覚、革新精神、実践力を備えた優秀な人材の育成に尽力し、地域の経済社会発展と国家戦略ニーズに知的支援と人材保障を提供しています。
                </motion.p>
                <h1>発展の歴史と学校規模</h1>
                <motion.p
                  initial={{ opacity: 0, y: -20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                >
                  本学は[設立年]に設立され、これまで[「学科調整」「改称」「博士課程設置」「ダブルファーストクラス構想」への選定など、重要な発展の節目を迎えてきました。]設立当初の[「単科大学」「師範学校」といった教育水準/特色]から、幅広い分野を擁し、高い教育水準を誇る総合大学へと成長しました。
                  現在、本学は[XXムー/XX千平方メートル]の敷地を有し、[XX]のキャンパス（「メインキャンパス、イーストキャンパス、科学技術イノベーションパーク」など）を擁し、優美なキャンパス環境と充実した教育研究施設を誇っています。現在、本学には[XX百万人]の正規学生が在籍しており、そのうち[XX百万人]は学部生、[XX百万人]は大学院生、[XX百万人]は博士課程学生、[XX人]は留学生です。また、この大学は
                  [XX 万人]
                  の教職員を擁し、組織化された優秀な教育・管理チームを形成しています。
                </motion.p>
                <h1>規律の構築と学校の特質</h1>
                <motion.p
                  initial={{ opacity: 0, y: -20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                >
                  本学の専門分野は、工学、理学、文学、経営学、経済学、法学、教育学といった中核分野を網羅し、確固たる基礎分野、先進的な応用分野、そして際立った独自性を持つ分野を特徴とする学問体系を形成しています。本学は、[XX]の修士課程（第一段階）、[XX]の専門職修士課程、[XX]の博士課程（第一段階）、[XX]の博士研究ステーションを提供しています。[XX]の分野は、「双一流」プロジェクト、国家重点分野、または省重点分野に指定されています（例：「コンピュータ科学技術、材料科学工学」は省「双一流」プロジェクトであり、「中国語文学」は国家認定の専門分野です）。
                </motion.p>
                <motion.p
                  initial={{ opacity: 0, y: -20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                >
                  特色ある教育内容としては、【地域産業の特色／国家戦略方向「先進製造業、海洋科学技術、文化創造」など】を重視し、「産学連携の緊密化、理学教育の深化、国際交流の拡大」といった特色ある教育の柱を有しています。例えば、【特色分野「インテリジェント製造業」】では、基礎研究から応用開発までの一貫した教育チェーンを構築し、業界をリードする【XX】社と共同でインターンシップ・研修拠点や共同研究室を構築しています。【人文社会科学分野「地域文化研究」】では専門研究所を設立し、その成果は数々の省・省レベルの賞を受賞しています。
                </motion.p>
                <h1>教員と科学研究の革新</h1>

                <motion.p
                  initial={{ opacity: 0, y: -20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                >
                  本学は「人材主導大学」戦略を堅持し、一流学者を筆頭に、若手・中堅の専門家が支える学部体制を構築しています。現在、専任教員はXX名を超え、その中にはXX名もの院士、XX名の長江学者、XX名の国家優秀若手学者科学基金受賞者、XX名の国家優秀教員など、国家レベルのハイレベル人材、XX省レベルの学術リーダー、優秀な教員がいます。専任教員のXX%以上が博士号を取得しており、XX%以上が海外留学または就業経験を有しています。
                </motion.p>
                <motion.p
                  initial={{ opacity: 0, y: -20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                >
                  本学の研究・イノベーション能力は継続的に向上しており、XXの国家研究プラットフォーム（国家重点実験室、国家工程技術研究センターなど）、XXの省および省級重点実験室、人文社会科学研究拠点を有しています。過去5年間で、チームは[XX件]の国家級科学研究プロジェクト（中国国家自然科学基金、中国国家社会科学基金の資金提供を受けた[XX件]の重大プロジェクトを含む）を遂行し、省級、部署級以上の科学研究賞を[XX件]受賞し、ハイレベルな学術論文を[XX件]発表し、特許を[XX件]取得し、多くの成果の転化と応用を実現し、産業の発展と社会の進歩に貢献しました。
                </motion.p>
                <h1>人材育成と社会的評判</h1>
                <motion.p
                  initial={{ opacity: 0, y: -20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                >
                  本学は、道徳の涵養と人材育成を根本理念に掲げ、教育改革を深化させ、「一般教育＋専門教育＋個別教育」を特徴とする人材育成モデルを確立しました。現在、全国一流の学部専攻[XX]と省一流の学部専攻[XX]を含む[XX]の学部専攻を提供しています。また、[XX]の国家レベルの質の高い授業、質の高いリソース共有授業、そして一流の学部課程を誇ります。
                </motion.p>
                <motion.p
                  initial={{ opacity: 0, y: -20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                >
                  本学の人材育成の質の高さは広く認められており、過去5年間、卒業生の就職率は[XX%]以上を維持しており、多くの卒業生が[情報技術、ハイエンド製造、教育研究、政府機関などの業界]の有名企業や組織に就職しています。さらに、「インターネットプラス」や「チャレンジカップ」など、全国および省レベルの学術コンテストで[XX]の賞を受賞しています。本学は、「卒業生の就職模範となる全国大学」、「省レベル文明キャンパス」などの名誉称号をはじめ、数々の栄誉を授与され、権威ある各種大学ランキングでも上位にランクされており、その名声と影響力はますます高まっています。
                </motion.p>
              </>
            ) : (
              <div className="grid grid-cols-3 gap-x-4 gap-y-4">
                {fullNavConfig[2].children?.map((item) => {
                  return (
                    <div
                      className="flex text-base items-start font-medium cursor-pointer hover:text-orange-300 transition-all"
                      key={item}
                    >
                      <ArrowUpRight size={16} className="pt-1" />
                      <span>{item}</span>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </div>
    </motion.div>
  );
};

export default FullNav;
